
<template>
  <div class="total">
      <public-header></public-header>
      <star-list :goods="looklist" :datas="datalist" :photos="photolist"></star-list>
      <public-footer></public-footer>
  </div>
</template>
<script type="text/ecmascript-6">
  import PublicHeader from "../components/commons/PublicHeader.vue";
  import StarList from "../components/starlist/StarList.vue";
  import PublicFooter from "../components/commons/Footer.vue";
  import GoodsApi from "../apis/bshopapis";
    export default {
      components:{
        PublicHeader,
        StarList,
        PublicFooter
      },
      mounted:()=>{
        setTimeout(changeTime,1000);
        function changeTime() {
          var mySwiper = new Swiper ('.swiper-container', {
            direction: 'horizontal',
            autoHeight: true,
            onSlideChangeStart:function(e){
              var index=e.activeIndex;
              $(".xhead-c span:first-child").removeClass("active");
              $(".xhead-c span").eq(index).addClass("active").siblings().removeClass("active");
            }
          });
          $(".swiper-wrapper").css("height","100%");
        }
      },
      created:function(){
        this.initLook(),
        this.initDeta(),
        this.initPhoto()
      },
      methods:{
        initLook:function(){
          GoodsApi.getGoodsList((data)=>{
            this.looklist=data;
          })
        },
        initDeta:function(){
          GoodsApi.getLookList((data)=>{
            this.datalist=data;
          })
        },
        initPhoto:function(){
          GoodsApi.getPhotosList((data)=>{
            this.photolist=data;
          })
        }
      },
      data(){
        return{
          looklist:[],
          datalist:[],
          photolist:[]
        }
      }
    }
</script>
<style>
  .total{
    font-family:"微软雅黑",Arial;
    background: #f5f5f9;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: inherit;
    height: 100%;
  }
</style>
